import React, { useState } from 'react';
import { View as OriginView } from '@ray-js/ray';
import { isOdd, numPosition, numToIndex } from '@/utils';

const array2obj = (arr: any) => {
  let obj = {};

  arr.forEach(element => {
    obj = {
      ...obj,
      ...element,
    };
  });

  return obj;
  // return arr.map(item=> { return  ...item })
};
const View = ({ style, ...props }: any) => {
  let formatStyle = style;
  if (Array.isArray(style)) {
    formatStyle = array2obj(style);
  }

  return <OriginView {...props} style={formatStyle} />;
};

const styles = {
  wrap: {
    position: 'relative',
  },
  numAbs: {
    position: 'absolute',
    display: 'flex',
  },
  rowLine: {
    backgroundColor: '#ff0000',
  },
  columnLine: {
    backgroundColor: '#ff0000',
  },
  commonAngle: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
  },
  leftChoice: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: '#ff0000',
  },
  rightChoice: {
    borderTopColor: 'transparent',
    borderLeftColor: '#ff0000',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
  topChoice: {
    borderTopColor: '#ff0000',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
  bottomChoice: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: '#ff0000',
    borderRightColor: 'transparent',
  },
  leftChoiceD: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
  rightChoiceD: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
  topChoiceD: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
  bottomChoiceD: {
    borderTopColor: 'transparent',
    borderLeftColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
  },
};

export const LEDDisplay = ({ num, numWidth, numBorder, style }: any) => {
  const numTxt = numToIndex(num);

  const text8 = [0, 1, 2, 3, 4, 5, 6];

  return (
    <View
      style={[
        styles.wrap,
        style,
        { width: numWidth + numBorder * 5, height: numWidth * 2 + numBorder * 9 },
      ]}
    >
      {text8.map(item => {
        if (numTxt.includes(item)) {
          return (
            <View
              key={item}
              style={[
                styles.numAbs,
                {
                  flexDirection: !isOdd(item) ? 'column' : 'row',
                },
                numPosition(item, numWidth, numBorder),
              ]}
            >
              <View
                style={[
                  styles.commonAngle,
                  { borderWidth: numBorder },
                  !isOdd(item) ? styles.bottomChoice : styles.leftChoice,
                ]}
              />
              <View
                style={
                  !isOdd(item)
                    ? [styles.columnLine, { width: numBorder * 2, height: numWidth }]
                    : [styles.rowLine, { width: numWidth, height: numBorder * 2 }]
                }
              />
              <View
                style={[
                  styles.commonAngle,
                  { borderWidth: numBorder },
                  !isOdd(item) ? styles.topChoice : styles.rightChoice,
                ]}
              />
            </View>
          );
        }
        return (
          <View
            key={item}
            style={[
              styles.numAbs,
              {
                flexDirection: !isOdd(item) ? 'column' : 'row',
              },
              numPosition(item, numWidth, numBorder),
            ]}
          >
            <View
              style={[
                styles.commonAngle,
                { borderWidth: numBorder },
                !isOdd(item) ? styles.bottomChoiceD : styles.leftChoiceD,
                // { backgroundColor: 'transparent' },
              ]}
            />
            <View
              style={
                !isOdd(item)
                  ? [
                      styles.columnLine,
                      { width: numBorder * 2, height: numWidth },
                      { backgroundColor: 'transparent' },
                    ]
                  : [
                      styles.rowLine,
                      { width: numWidth, height: numBorder * 2 },
                      { backgroundColor: 'transparent' },
                    ]
              }
            />
            <View
              style={[
                styles.commonAngle,
                { borderWidth: numBorder },
                !isOdd(item) ? styles.topChoiceD : styles.rightChoiceD,
                // { backgroundColor: 'transparent' },
              ]}
            />
          </View>
        );
      })}
    </View>
  );
};

export default LEDDisplay;
